<template>
    <div class='box'>
        <div class="top">
            <div class="top1">
                <img src="../../static/images/pl3.png" alt="">
            <div><p class="h1">ssq</p><span >23445</span></div>
            </div>
            <span class="ls" @click="zxcv(list.lottery_id)" >历史开奖</span>
        </div>
        <div class="div"><div class="number" v-for="item,index in arr" :key="index">{{ item }}</div></div>
        <!-- 钱 -->
        <div class="numb">
            <div>
                <p>本期销量（元）</p>
                <p>{{list.lottery_sale_amount}}</p>
            </div>
            <div>
                <p>奖池信息（元）</p>
                <p>{{list.lottery_pool_amount}}</p>
            </div>
        </div>
        <!-- 列表 -->
       <div class="th">
                <p>奖池</p>
                <p>中奖条件</p>
                <p>中奖注数</p>
                <p>每注奖金（元）</p>
        </div>
        <ul>
            <li v-for="item,index in list.lottery_prize" :key="index">
                <p>{{ item.prize_name }}</p>
                <p>{{ item.prize_require }}</p>
                <p>{{ item.prize_num }}</p>
                <p>{{ item.prize_amount }}</p>
            </li>
        </ul>
    </div>
    </template>
    <script>
    import { onShow } from "@dcloudio/uni-app";
    export default {
     components: {
    
     },
     data() {
    return {
        id:'',
        list:{},
        arr:[]
      };
     },
    methods: {
        zxcv(id){
            uni.navigateTo({url:'/pages/list/history'})
        }
     }, 
     onShow(){
        this.id=uni.getStorageSync('id')
        uni.request(
                    {
                        url:"http://api.aslegou.top/api/cpdesc",
                        method:"GET",
                        data:{lottery_id:this.id},
                        success:res=>{
                            console.log(res);
                            this.list=res.data.list
                            console.log(this.list.lottery_res);
                            this.arr=this.list.lottery_res.split(',')
                            console.log(this.arr);
                        
                        }
                    }
                )
     }
    };
    </script>
    <style >
    .box{
        padding-top: 30px;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .th{
        display: flex;
        justify-content: space-around;
        height: 40px;
        background-color: #ccc;
        align-items: center;
    }
    li{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20px;
    }
    .h1{
        font-weight: 700;
        font-size: 24px;
    }
    .ls{
        color: #d1634c;
        margin-right: 20px;
    }
    .top1{
        display: flex;
    
    }
    .numb{
        display: flex;
        justify-content:space-around;
        padding-bottom: 30px;
        padding-top: 10px;
        border-top: 1px solid #000;
    }
    .number{
        border-radius: 50%;
        border: 1px solid orange;
        color: #d1634c;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .div{
        display: flex;
        margin-left: 40px;
        margin-bottom: 20px;
    }
    </style>